<template>
	<div class="withdrawals_page">
		<div class="header">
			<van-nav-bar
				title="宣教积分"
				left-arrow
				@click-left="onClickLeft"
				/>
		</div>
        <div class="kong"></div>
	    <div style="background:#fff">

        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad"
            finished-text="没有更多了"
            :immediate-check="immediate"
            :offset="10"
          >
            <div class="integral_dvs" v-for="(item,i) in items" :key="i">
                <p>{{item.title}}<br><span>{{item.update_date | formatDate}}</span></p>
                <p>+{{item.integral}}积分</p>
            </div>

          </van-list>
        </van-pull-refresh>
		</div>
	</div>
</template>
<script>
    import {formatDate} from '../../utils/filters.js'
	export default {
        data() {
            return {
                user:'',
                items:[],
                page:0,
                isLoading:false,
                loading: false,   //是否处于加载状态
                finished: false, //是否已加载完所有数据
                immediate:false
            };

        },
      filters:{
          formatDate(time){
              var data = new Date(time);
              return formatDate(data,'yyyy-MM-dd hh:mm');
          }


      },
        mounted:function(){
            const that = this;
            let local_user = localStorage.getItem("user");
            if (local_user != undefined && local_user != "undefined") {
                let user = JSON.parse(local_user);
                that.user = user;
                that.education_integral(0);
            }
        },
        methods:{
            onClickLeft(){
                this.$router.back(-1)
            },
            onRefresh(){
                console.log("下拉刷新");
                const  that = this;
                that.isLoading = true;

                that.page = 0;
                that.items=[];
                that.education_integral(0);
            },
            onLoad() {
                console.log("上拉加载");
                console.log(this.finished);
                if(this.items.length != 0){
                    this.page = this.page+1;
                }
                this.education_integral(1);



            },
            education_integral(type){
                const that = this;
                let p = "userId="+that.user.userId+"&page="+that.page;
                that.$sendRequest('/education/education_integral',p).then(function(res){
                    console.log(res.data);
                    that.isLoading = false;
                    that.loading = false;
                    if(res.data.code ==0){
                        if(res.data.result.educationIntegral.length < 10){
                            that.finished = true;
                        }
                        for(var i = 0;i<res.data.result.educationIntegral.length;i++){
                            that.items.push(res.data.result.educationIntegral[i]);
                        }
                        if(type ==0){
                            that.finished = false;
                        }
                    }

                })
            },
        }
   };
</script>
<style scoped="scoped">
	.kong{
        height:0.4rem;
        background:rgba(246,246,246,1);
    }
    .integral_dvs{
        margin: 0 2.5vh;
        height: 4rem;
        border-bottom: 0.1vh solid rgba(246,246,246,1);
        /* display: flex; */
        padding-bottom: 1vh;
    }
    /* .integral_dvs p{
        flex: 1;
    } */
    .integral_dvs p:first-child{
        text-align: left;
        float: left;
        width: 58vw;
        /* line-height: 1.2rem; */
        /* background-color: #FF4242; */
        font-size: 1rem;
    }
    .integral_dvs p:first-child span{
        font-size: 0.85rem;
        color: #CCCCCC;
    }
    .integral_dvs p:nth-child(2){
        float: right;
        text-align: right;
        padding-right: 1rem;
        color: #FF4242;
        font-size: 1.2rem;
    }
    .header >>> .van-icon-arrow-left{
        color: #2c3e50;
    }
</style>

